<template>
	<uni-popup
		class="empire-prompt"
		ref="pupop"
		type="center"
		background-color="#392f41"
		border-radius="10rpx 10rpx 10rpx 10rpx"
	>
		<view class="success">
			<view class="success-icons">
				<uni-icons :type="iconType" size="32" color="#e9e7ef"></uni-icons>
			</view>
			<text class="success-text">{{ message }}</text>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, watch, onUnmounted, computed } from 'vue';
const props = defineProps({
	/**success info**/
	type: {
		type: String,
		default: 'success'
	},
	message: {
		type: String,
		default: undefined
	}
});
const model = defineModel({ type: Boolean, default: false });
const emits = defineEmits(['update:modelValue']);
const pupop = ref();
const timer = ref();
const iconType = computed(() => {
	if (props.type === 'success') return `checkmarkempty`;
	if (props.type === 'info') return `info`;
});
watch(model, (visible) => {
	if (visible) {
		pupop.value.open();
		timer.value = setTimeout(() => {
			emits('update:modelValue', false);
		}, 1000);
	} else {
		pupop.value.close();
	}
});
onUnmounted(() => {
	clearTimeout(timer.value);
});
</script>

<style scoped lang="scss">
.empire-prompt {
}
.success {
	display: grid;
	align-items: center;
	justify-content: center;
	width: 240rpx;
	height: 160rpx;
	&-icons {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	&-text {
		text-align: center;
		color: #e9e7ef;
		font-size: 32rpx;
	}
}
</style>
